<template>
  <div>
    
    <SelectTab :list="['手机注册', '邮箱注册']" @selectIndex="selectType" />
    <ErrorMsg class="error-msg" v-if="errMsg">{{ errMsg }}</ErrorMsg>
    <Form
      class="form"
      ref="form"
      :type="type"
      :model="model"
      :rules="rules"
      @errMsg="handleErrMsg"
      @sendCode="handleSendCode"
      @submit.native.prevent="handleSubmit"
    >
      <FormItem
        v-for="(item, index) of formItemsData"
        :key="index"
        :prop="item"
        v-model="item.vModel"
      />

      <SubmitButton class="btn" :loadStatus="loadStatus"> 登录 </SubmitButton>
    </Form>

    <div class="link margin-top_20" @click="$emit('changeComType', 'login')">
      已有账号?点击登录
    </div>
  </div>
</template>

<script>
import { fromMixin } from 'assets/js/mixin.js'
import AuthModel from 'api/auth.js'
const authModel = new AuthModel()

export default {
  mixins: [fromMixin],
  data() {
    return {
      model: {
        phone: {
          name: 'phone',
          vModel: '',
          inputType: 'number',
          placeholder: '手机号码'
        },
        password: {
          name: 'password',
          vModel: '',
          placeholder: '设置密码',
          formItemType: 'password'
        },
        verifyCode: {
          name: 'verifyCode',
          vModel: '',
          placeholder: '验证码',
          formItemType: 'verifyCode'
        },
        inviteCode: {
          name: 'inviteCode',
          vModel: '',
          placeholder: '邀请码没有可不填',
        },
        email: {
          name: 'email',
          vModel: '',
          inputType: 'email',
          placeholder: '邮箱',
        },
      },
      rules: {
        phone: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/, message: '手机号不正确' }
        ],
        password: [
          { required: true, message: '请设置密码' },
          { type: 'string', message: '最少输入6位数', validate: (rule, value) => value.length >= 6 }
        ],
        email: [
          { required: true, message: '邮箱不能为空' },
          { pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确' }
        ],
        verifyCode: [
          { required: true, message: '请输入验证码' },
        ]
      },
      formItems: {
        phone: ['phone', 'password', 'verifyCode', 'inviteCode'],
        email: ['email', 'password', 'verifyCode', 'inviteCode'],
      },
      errMsg: '',
      loadStatus: false
    }
  },
  methods: {
    async handleSubmit() {
      const res = await this.$refs.form.validate()
      const model = this.model

      if (res.status) {
        const options = {
          password: model.password.vModel,
          code: model.verifyCode.vModel,
          inviteCode: model.inviteCode.model,
        }

        if (this.type == 'phone') {
          options.phone = model.phone.vModel
        } else {
          options.email = model.email.vModel
        }

        this.loadStatus = true
        const result = await authModel.register(options)

        if (result.code != 0) {
          this.errMsg = result.mes
        }
        this.loadStatus = false
        return
      }
      this.errMsg = res.msg
    },
    async handleSendCode(account) {
      const res = await authModel.sendCode({ emial: account })
      if (res.code != 0) {
        this.errMsg = res.msg
      }
    }
  },
}
</script>

<style lang="less" scoped>
.form {
  margin-top: 20px;
}

.error-msg {
  margin-top: 20px;
}

.btn {
  margin-top: 20px;
}

.link {
  font-size: 16px;
  text-align: center;
  color: #848492;
  &:hover {
    text-decoration: underline;
  }
}

.margin-top_20 {
  margin-top: 20px;
}
</style>